@use "sass:math";

.toast {
  background-color: $toast-background-color;
  color: $toast-text-color;
  padding: #{math.div(10, $base-font-size)}rem;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  min-width: #{math.div(375, $base-font-size)}rem; //500px
  font-size: #{math.div(20, $base-font-size)}rem;
  display: flex;
  z-index: 9999;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6px 6px 0 rgba(0,0,0,0.10);
}

.toast__close {
  @include themify() {
    @extend %icon-toast;
  }
  padding-top: #{math.div(10, $base-font-size)}rem;
  margin-left: #{math.div(40, $base-font-size)}rem;
}